<template>
    <view class="slider-verify-box" v-if="isShow">
        <view class="verifyBox">
            <view class="slider-title">图形验证</view>
            <view class="slide-content">
                <view class="slide-tips">拖动下方滑块完成拼图</view>
                <view class="slider-pintu">
                    <image class="pintu" id="pintuImg" :src="'https://img121.7dun.com/kuaikuai/slider-verify/' + img + '/static/components/slider-verify/.jpg'"></image>
                    <view class="pintukuai" :style="'top:' + top + 'px' + ';' + 'left:' + oldx + 'px' + ';'">
                        <image
                            :src="'https://img121.7dun.com/kuaikuai/slider-verify/' + img + '/static/components/slider-verify/.jpg'"
                            :style="'top:' + '-' + top + 'px' + ';' + 'left:' + '-' + left + 'px' + ';'"
                        ></image>
                    </view>
                    <view class="yinying" :style="'top:' + top + 'px' + ';' + 'left:' + left + 'px' + ';'"></view>
                </view>
                <view @touchend="__e" class="slider-movearea" :data-event-opts="[['touchend', [['endTouchMove', ['$event']]]]]">
                    <movable-area :animation="true">
                        <movable-view @change="__e" :data-event-opts="[['change', [['startMove', ['$event']]]]]" direction="horizontal" :x="x"></movable-view>
                    </movable-area>
                    <view class="huadao">拖动左边滑块完成上方拼图</view>
                </view>
            </view>
            <view class="slider-btn-group">
                <view @tap="__e" class="slider-btn" :data-event-opts="[['tap', [['closeSlider', ['$event']]]]]">关闭</view>
                <view @tap="__e" class="slider-btn slide-btn-refresh" :data-event-opts="[['tap', [['refreshVerify', ['$event']]]]]">刷新</view>
            </view>
        </view>
    </view>
</template>

<script>
import tabBar from '@/components/TabBar/tabBar';
(global.webpackJsonp = global.webpackJsonp || []).push([
    ['components/slider-verify/slider-verify'],
    {
        7465: function (t, e, i) {
            'use strict';

            i.d(e, 'b', function () {
                return n;
            });
            i.d(e, 'c', function () {
                return o;
            });
            i.d(e, 'a', function () {});
            var n = function () {
                this.$createElement;
                this._self._c;
            };
            var o = [];
        },
        bc5d: function (t, e, i) {
            'use strict';

            (function (t) {
                Object.defineProperty(e, '__esModule', {
                    value: true
                });
                e.default = void 0;
                var i = {
                    name: 'slider-verify',
                    props: {
                        isShow: true,
                        session_id: {
                            type: Number,
                            default: 0
                        },
                        activity_uuid: {
                            type: String
                        },
                        inviter_user_uuid: {
                            type: String
                        }
                    },
                    data: function () {
                        return {
                            x: 0,
                            oldx: 0,
                            img: '1',
                            left: 0,
                            top: 0
                        };
                    },
                    watch: {
                        isShow: function (t, e) {
                            if (t) {
                                this.refreshVerify();
                            }
                        }
                    },
                    mounted: function () {
                        this.refreshVerify();
                    },
                    methods: {
                        refreshVerify: function () {
                            var e = Math.random().toFixed(2);
                            this.left = t.upx2px(560) * e > t.upx2px(280) ? t.upx2px(280) : t.upx2px(560) * e + t.upx2px(150);
                            this.top = t.upx2px(190) * e;
                            if (e <= 0.2) {
                                this.img = 1;
                            }
                            if (e > 0.2 && e <= 0.4) {
                                this.img = 2;
                            }
                            if (e > 0.4 && e <= 0.6) {
                                this.img = 3;
                            }
                            if (e > 0.6 && e <= 0.8) {
                                this.img = 4;
                            }
                            if (e > 0.8 && e <= 1) {
                                this.img = 5;
                            }
                            this.resetMove();
                        },
                        startMove: function (t) {
                            this.oldx = t.detail.x;
                        },
                        endTouchMove: function () {
                            var that = this;
                            Math.abs(that.oldx - that.left) <= 5
                                ? (t.showToast({
                                      title: '验证成功',
                                      duration: 1500,
                                      success: function () {
                                          that.$emit('touchSliderResult', true);
                                      }
                                  }),
                                  this.acceptInvite())
                                : that.refreshVerify();
                        },
                        acceptInvite: function () {
                            var that = this;
                            t.showLoading({
                                title: '助力中'
                            });
                            this.$http('/lotteries/'.concat(this.activity_uuid, '/accept-invite'), 'POST', {
                                inviter: this.inviter_user_uuid
                            }).then(function (i) {
                                that.isAccepted = 1;
                                t.hideLoading();
                                t.showToast({
                                    title: '助力成功~',
                                    icon: 'none'
                                });
                            });
                        },
                        resetMove: function () {
                            var that = this;
                            this.x = 1;
                            this.oldx = 1;
                            setTimeout(function () {
                                that.x = 0;
                                that.oldx = 0;
                            }, 300);
                        },
                        closeSlider: function () {
                            this.$emit('touchSliderResult', false);
                        }
                    }
                };
                e.default = i;
            }.call(this, i('543d').default));
        },
        cd5d: function (t, e, i) {
            'use strict';

            i.r(e);
            var n = i('bc5d');
            var o = i.n(n);
            for (var r in n) {
                if (['default'].indexOf(r) < 0) {
                    (function (t) {
                        i.d(e, t, function () {
                            return n[t];
                        });
                    })(r);
                }
            }
            e.default = o.a;
        },
        ded3: function (t, e, i) {
            'use strict';

            i.r(e);
            var n = i('7465');
            var o = i('cd5d');
            for (var r in o) {
                if (['default'].indexOf(r) < 0) {
                    (function (t) {
                        i.d(e, t, function () {
                            return o[t];
                        });
                    })(r);
                }
            }
            i('e3e9');
            var s = i('f0c5');
            var c = Object(s.a)(o.default, n.b, n.c, false, null, null, null, false, n.a, void 0);
            e.default = c.exports;
        },
        e3e9: function (t, e, i) {
            'use strict';

            var n = i('fdfb');
            i.n(n).a;
        },
        fdfb: function (t, e, i) {}
    }
]);
(global.webpackJsonp = global.webpackJsonp || []).push([
    'components/slider-verify/slider-verify-create-component',
    {
        'components/slider-verify/slider-verify-create-component': function (t, e, i) {
            i('543d').createComponent(i('ded3'));
        }
    },
    [['components/slider-verify/slider-verify-create-component']]
]);
</script>
<style>
@import './slider-verify.css';
</style>
